<template>
    <div class="container">
        <div class="showPic"></div>
        <div class="iconfont icon-shubiao"></div>
        <div class="fixContent">
            <div class="info">
                <div class="layerTitle">千年一梦镜然西安</div>
                <div class="type">
                    <div>静态</div>
                    <div>海报</div>
                </div>
                <div class="intro">
                    <div>老城根下的古城砖瓦</div>
                    <div>大明宫前的火树银花</div>
                    <div>在镜中一览西安千年的大气繁华</div>
                    <div>老城根下的古城砖瓦</div>
                    <div>大明宫前的火树银花</div>
                    <div>在镜中一览西安千年的大气繁华</div>
                    <div>大明宫前的火树银花</div>
                </div>
                <div class="make">
                <div class="product">
                    <span><img src="@/assets/sign.png" alt="" ></span>
                    <span>联合出品:</span>
                </div>
                <div class="part">
                    <div>西安市人民政府新闻办公室 </div>
                    <div>西安市互联网信息办公室</div>
                    <div>西安市人民政府新闻办公室 </div>
                    <div>西安市人民政府新闻办公室 </div>
                </div>
            </div>
        </div>
        <div class="radius"></div>
    </div>
</div>
</template>

<style lang="less">
.layer {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.7);
  z-index: 99;
    .container{
        width: 100%;
        .showPic{
            height: 870px;
            width: 470px;
            background: #000;
            position: absolute;
            transform: translate(-50%,-50%);
            top:50%;
            left: 50%;
            overflow: hidden;
        }
        .iconfont{
            font-size: 32px;
            color: #fff;
            position: absolute;
            transform: translate(-50%,-50%);
            top:85%;
            left: 65%;
        }
        .fixContent {
            width: 300px;
            // height: 780px;
            background: #e9e9e9;
            position: absolute;
            transform: translate(-50%, -50%);
            top: 10%;
            left: 85%;
            border-radius: 15px;
            z-index: 999;
                .info {
                width: 100%;
                border-radius: 20px;
                background: #e9e9e9;
                padding: 5px 15px;
                box-sizing: border-box;
                position: absolute;
                z-index: 5;
                .layerTitle {
                    width: 120px;
                    font-size: 30px;
                    padding: 20px 0;
                    text-align: justify;
                    overflow-wrap: break-word;
                }
            .intro {
                // height: 14vw;
                font-size: 14px;
                padding: 15px 0;
                box-sizing: border-box;
            }
            .type {
                display: flex;
                // padding: 0 0 15px;
                div {
                padding: 3px 10px;
                border: 1px solid #444;
                border-radius: 10px;
                font-size: 12px;
                margin: 0 3px 0;
                }
            }
            .make {
                display: flex;
                justify-content: space-between;
                border-top: 1px solid #000;
                padding: 10px 0;
                font-size: 12px;
                .product {
                font-size: 14px;
                img {
                    width: 30%;
                    vertical-align: middle;
                    padding-right: 5px;
                }
                }
            }
        }
        .radius {
            width: 290px;
            height: 30px;
            background: #fff;
            position: absolute;
            transform: translate(-50%, -50%);
            top: 5px;
            left: 50%;
            border-radius: 15px;
            }
        
        }
    }
}
</style>